<template>
    <!-- 报警事件管理  -->
    <div class="content_div">
        <div class="content_top">
            <div class="content_title">系统管理 / <span style="color: var(--buttonDeep-color)">报警事件处置</span></div>
            <i class="sprite-diagonal-bar"></i>
        </div>
        <div class="search_div">
            <div class="title_div">
                <span class="tit">事件名称</span>
                <el-select
                    v-model="queryParams.alarmEvents"
                    placeholder="请选择事件类型"
                    popper-class="selectPopprt"
                    filterable
                    class="div-small-select"
                    @change="alarmEventsChange"
                    style="width: 100%; background-color: none !important; border: none"
                >
                    <el-option v-for="(item, index) in options.alarmEventsOptions" :key="index" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select
                    v-model="queryParams.alarmType"
                    filterable
                    placeholder="请选择报警名称"
                    class="title_div"
                    popper-class="selectPopprt"
                    style="width: 100%; background-color: none !important; border: none; margin-left: 20px;height: 0px;"
                >
                    <el-option v-for="(item, index) in options.alarmEventTypeOptions" :key="index" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="dis_flex">
                <div class="search" @click="getList">查询</div>
                <div class="reset" @click="handleReset">重置</div>
            </div>
        </div>
        <div class="content_top" style="justify-content: space-between">
            <div class="dis_flex">
                <div class="content_title">报警事件处置列表</div>
                <i class="sprite-diagonal-bar"></i>
            </div>
            <div class="con_tit" @click="springFrame()"><i class="sprite-List-related-added"></i> 新增</div>
        </div>
        <el-table
            class="customer-table"
            :data="tableData"
            tooltip-effect="dark"
            ref="multipleSelection"
            v-loading="tableLoading"
            element-loading-background="var(--eleTableHover)"
            :height="tableData.length ? $store.state.height - 340 : 'auto'"
            style="width: 100%; background-color: transparent"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
            <el-table-column header-align="center" align="center" type="index" label="序号" width="80"> </el-table-column>
            <el-table-column prop="alarmTypeName" label="报警类型" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="alarmEventsName" label="报警事件名称"> </el-table-column>
            <el-table-column prop="alarmLevel" label="报警等级"> </el-table-column>
            <el-table-column prop="planName" label="处置预案"> </el-table-column>
            <el-table-column label="启用状态">
                <template slot-scope="{ row }">
                    <el-switch
                        v-model="row.enabled"
                        @change="switchUpdate(row)"
                        :active-value="true"
                        :inactive-value="false"
                        active-color="#409EFF"
                        inactive-color="#DCDFE6"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div style="display: flex">
                        <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                            <div class="sprite-List-related-watch" @click="handleWatch(scope.row)" style="cursor: pointer"></div>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                            <div
                                class="sprite-List-related-update"
                                @click="edit(scope.row)"
                                style="margin-left: 10px; cursor: pointer"
                            ></div>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <div
                                class="sprite-List-related-delete-table"
                                @click="delRow(scope.row, tableData)"
                                style="margin-left: 10px; cursor: pointer"
                            ></div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="paging div-pagination">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 30, 60, 90, 100]"
                :total="totalCount"
            ></el-pagination>
        </div>
        <!-- 查看 -->
        <el-dialog
            :visible.sync="watchDialog"
            width="60%"
            :before-close="beforeClosed"
            class="dialog-doubleColumn"
            title="查看警情应用名称"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
        >
            <el-form :model="formDataWatch" label-width="120px" ref="form" :rules="rules">
                <el-form-item label="事件类型" style="width: 50%">
                    <el-input readonly v-model="formDataWatch.alarmTypeName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="报警事件" style="width: 50%">
                    <el-input readonly v-model="formDataWatch.alarmEventsName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="报警等级" style="width: 100%">
                    <el-input readonly v-model="formDataWatch.alarmLevel" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="处置预案" style="width: 100%">
                    <el-input readonly v-model="formDataWatch.planName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="关联设备" style="width: 100%">
                    <x-device-cascader
                        disabled
                        v-model="formDataWatch.deviceId"
                        :props="{ multiple: true, label: 'name', value: 'code' }"
                    />
                </el-form-item>
                <el-form-item label="显示设备" style="width: 100%">
                    <x-device-cascader
                        disabled
                        v-model="formDataWatch.displayDebiceId"
                        :props="{ multiple: true, label: 'name', value: 'code' }"
                    />
                </el-form-item>
                <el-form-item label="事件ICON" style="width: 100%">
                    <UpdataChaIcon v-model="formDataWatch.iconList" disabled></UpdataChaIcon>
                </el-form-item>
                <el-form-item label="启用状态" style="width: 100%">
                    <div v-if="formDataWatch.enabled === false">禁用</div>
                    <div v-if="formDataWatch.enabled === true">启用</div>
                </el-form-item>
                <el-form-item label="备注" style="width: 100%">
                    <el-input readonly v-model="formDataWatch.remarks" placeholder=""></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button class="dialog-footer-resetBtn" @click="watchDialog = false">关闭</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="iconVisible" :modal-append-to-body="false">
            <img width="100%" :src="formDataWatch.iconList" alt="" />
        </el-dialog>
        <!-- 新增  编辑 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="beforeClosed"
            class="dialog-doubleColumn"
            :title="formTit"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
        >
            <el-form :model="formData" label-width="100px" ref="form" :rules="rules">
                <el-form-item label="事件类型" style="width: 50%" prop="alarmEvents">
                    <el-select
                        :disabled="formTit === '修改'"
                        v-model="formData.alarmEvents"
                        placeholder="请选择事件类型"
                        popper-class="selectPopprt"
                        class="div-small-select"
                        @change="alarmEventChange"
                        style="width: 100%; background-color: none !important; border: none"
                    >
                        <el-option v-for="(item, index) in options.alarmEventsOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警事件" style="width: 50%" prop="alarmType">
                    <el-select
                        :disabled="formTit === '修改'"
                        v-model="formData.alarmType"
                        placeholder="请选择报警事件"
                        popper-class="selectPopprt"
                        @change="alarmTypeChange"
                        class="div-small-select"
                        style="width: 100%; background-color: none !important; border: none"
                    >
                        <el-option v-for="(item, index) in options.alarmTypeOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警等级" style="width: 100%" prop="alarmLevel">
                    <el-select
                        v-model="formData.alarmLevel"
                        placeholder="请选择报警等级"
                        popper-class="selectPopprt"
                        class="div-small-select"
                        style="width: 100%; background-color: none !important; border: none"
                    >
                        <el-option v-for="(item, index) in options.alarmLevel" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="处置预案" style="width: 100%" prop="planId">
                    <el-select
                        v-model="formData.planId"
                        placeholder="请选择处置预案"
                        popper-class="selectPopprt"
                        @change="planIdChange"
                        class="div-small-select"
                        style="width: 100%; background-color: none !important; border: none"
                    >
                        <el-option v-for="(item, index) in options.disposalPlan" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联设备" style="width: 100%" prop="deviceId">
                    <x-device-cascader v-model="formData.deviceId" :props="{ multiple: true, label: 'name', value: 'code' }" />
                </el-form-item>
                <el-form-item label="显示设备" style="width: 100%" prop="displayDebiceId">
                    <x-device-cascader v-model="formData.displayDebiceId" :props="{ multiple: true, label: 'name', value: 'code' }" />
                </el-form-item>
                <el-form-item label="启用状态" prop="enabled" style="width: 100%">
                    <el-switch
                        v-model="formData.enabled"
                        :active-value="true"
                        :inactive-value="false"
                        active-color="#409EFF"
                        inactive-color="#DCDFE6"
                    />
                </el-form-item>
                <el-form-item label="事件ICON" style="width: 100%">
                    <UpdataChaIcon v-model="formData.iconList" :size="2"></UpdataChaIcon>
                </el-form-item>
                <el-form-item label="备注" style="width: 100%" prop="remarks">
                    <el-input type="textarea" :rows="2" placeholder="" v-model="formData.remarks"> </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="beforeClosed" class="dialog-footer-resetBtn">取 消</el-button>
                <el-button class="dialog-footer-sureBtn" v-preventReClick @click="submitForm">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from '../../api/systemManagement/alarmEvents.js';
import optionsMixin from '../../mixins/optionsMixin';
import XDeviceCascader from '../../components/form/XDeviceCascader.vue';
import UpdataChaIcon from '../../components/upload/updataChaIcon.vue';
export default {
    mixins: [optionsMixin],
    components: { XDeviceCascader, UpdataChaIcon },
    data() {
        return {
            iconVisible: false,
            tableLoading: false,
            dialogVisible: false,
            watchDialog: false,
            formTit: '',
            formDataWatch: {},
            options: {
                alarmEventsOptions: [],
                alarmEventTypeOptions: [],
                alarmEvents: [],
                alarmTypeOptions: [],
                disposalPlan: [],
                alarmLevel: [
                    {
                        value: 1,
                        label: '1'
                    },
                    {
                        value: 2,
                        label: '2'
                    },
                    {
                        value: 3,
                        label: '3'
                    },
                    {
                        value: 4,
                        label: '4'
                    }
                ]
            },
            queryParams: {
                alarmEvents: '',
                alarmType: '',
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            totalCount: 0,
            rules: {
                alarmEvents: [
                    { required: true, message: '请选择报警事件', trigger: ['blur'] }
                    // { validator: this.$ruler.x2z20, trigger: ['change', 'blur'] }
                ],
                alarmType: [{ required: true, message: '请选择事件类型', trigger: ['blur'] }],
                alarmLevel: [{ required: true, message: '请选择报警等级', trigger: ['blur'] }],
                deviceId: [{ required: true, message: '请选择关联设备', trigger: ['blur'] }],
                displayDebiceId: [{ required: true, message: '请选择显示设备', trigger: ['blur'] }],
                planId: [{ required: true, message: '请选择处置预案', trigger: ['blur'] }],
                remarks: [{ max: 500, message: '文字录入，限制500个（含）', trigger: ['change', 'blur'] }]
            },
            formData: {
                // alarmType:''
                enabled: true
            },
            isDisabled: false
        };
    },
    created() {
        // 查询
        this.getList();
        // 重置
        this.handleReset();
        // 设备字典
        this.getDeviceId();
        // 报警事件名称-类型
        api.getAlarmEvents({}).then((data) => {
            this.options.alarmEventsOptions = data.data.map((item) => ({
                ...item,
                label: item.name,
                value: item.code
            }));
        });
    },
    methods: {
        /**
         * 添加-报警事件名称传参-name
         *
         */
        alarmEventChange(code, value) {
            // let label = '';
            // label = this.options.alarmEvents.find((item) => item.code === e )?.label;
            // this.$set(this.formData, 'alarmEventsName', label);
            this.options.alarmTypeOptions = [];
            this.formData.alarmType = '';
            // console.log('aa', code, value);
            if (value) {
                // this.formData.alarmEvents = value;
                this.formData.alarmType = `${value}`;
            }
            this.options.alarmEventsOptions.filter((item) => {
                if (item.code === code) {
                    this.options.alarmTypeOptions = item.alarmTypeList.map((item) => ({
                        // ...item,
                        label: item.name,
                        value: item.code
                    }));
                    this.$set(this.formData, 'alarmEventsName', item.name);
                }
            });
        },
        // 添加-事件类型传参-name
        alarmTypeChange(value) {
            // console.log('e=====', value);
            this.options.alarmTypeOptions.filter((item) => {
                if (item.value === value) {
                    this.$set(this.formData, 'alarmTypeName', item.label);
                }
            });
        },
        // 添加-处置预案传参-name
        planIdChange(value) {
            const label = this.options.disposalPlan.find((item) => item.value === value).label;
            this.$set(this.formData, 'planName', label);
        },
        // 查询
        getList() {
            this.tableLoading = true;
            api.list({
                alarmEvents: this.queryParams.alarmType,
                alarmType: this.queryParams.alarmEvents,
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize
            }).then((response) => {
                this.tableData = response.data.records;
                this.totalCount = response.data.total;
                this.tableLoading = false;
            });
            // 处置预案
            api.alarmPlanList({}).then((data) => {
                this.options.disposalPlan = data.data.map((item) => ({
                    ...item,
                    label: item.name,
                    value: item.id
                }));
            });
        },
        //
        // 搜索-报警事件名称
        alarmEventsChange(e) {
            this.options.alarmEventTypeOptions = [];
            this.queryParams.alarmType = '';
            this.options.alarmEventsOptions.filter((item) => {
                if (item.code === e) {
                    this.options.alarmEventTypeOptions = item.alarmTypeList.map((item) => ({
                        ...item,
                        label: item.name,
                        value: item.code
                    }));
                }
            });
        },
        beforeClosed() {
            this.dialogVisible = false;
            this.watchDialog = false;
            this.formData = {
                alarmEvents: '',
                alarmType: '',
                alarmLevel: '',
                planId: '',
                deviceId: '',
                displayDebiceId: '',
                remarks: '',
                iconList: []
            };
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 重置
        handleReset() {
            this.queryParams = {
                alarmEvents: '',
                alarmType: '',
                pageSize: 10,
                pageNum: 1
            };
            this.getList();
        },
        // 添加
        springFrame() {
            this.dialogVisible = true;
            this.formTit = '新增报警事件';
            this.formData = {
                alarmEvents: '',
                alarmType: '',
                alarmLevel: '',
                planId: '',
                deviceId: '',
                enabled: true,
                remarks: ''
            };
        },
        // 查看
        handleWatch(row) {
            this.watchDialog = true;
            api.info(row.id).then((data) => {
                this.formDataWatch = data.data;
                // 关联设备
                if (data.data && data.data.deviceId) {
                    data.data.deviceId = JSON.parse(data.data.deviceId);
                }
                // 显示设备
                if (data.data && data.data.displayDebiceId) {
                    data.data.displayDebiceId = JSON.parse(data.data.displayDebiceId);
                }
                // 处置预案
                if (data.data && data.data.planId) {
                    data.data.planId = JSON.parse(data.data.planId);
                }
                // 报警事件类型
                this.options.alarmEventsOptions.filter((item) => {
                    if (item.code === data.data.alarmEvents) {
                        this.options.alarmTypeOptions = item.alarmTypeList.map((item) => ({
                            // ...item,
                            label: item.name,
                            value: item.code
                        }));
                    }
                });
                this.formDataWatch.iconList = this.formDataWatch.crmAttachList;
                if (this.formDataWatch.iconList) {
                    this.formDataWatch.iconList = this.formDataWatch.iconList.map((item) => ({
                        name: item.fileName,
                        url: item.uri
                    }));
                }
                const temp = JSON.parse(JSON.stringify(row));
                this.formDataWatch.alarmType = temp.alarmEvents;
                this.formDataWatch.alarmEvents = temp.alarmType;
                this.alarmEventChange(this.formDataWatch.alarmEvents, temp.alarmEvents);
                console.log('ffff', this.formDataWatch);
            });
        },
        switchUpdate(row) {
            const alarmEventId = row.id;
            const enabled = row.enabled ? 1:2
            api.isEnable(alarmEventId,enabled).then(() => {
                    this.$message.success('修改成功');
                    this.getList();
                })
                .catch(() => {
                    this.getList();
                });
            // api.update(row)
            //     .then(() => {
            //         this.$message.success('修改成功');
            //         this.getList();
            //     })
            //     .catch(() => {
            //         this.getList();
            //     });
        },
        // 修改
        edit(row) {
            this.formLoading = true;
            this.dialogVisible = true;
            this.formTit = '编辑报警事件处置';
            const id = row.id || this.ids;
            api.info(id).then((data) => {
                this.formData = data.data;
                this.formData.iconList = this.formData.crmAttachList;
                // console.log('this.formData', this.formData)

                if (this.formData.iconList) {
                    this.formData.iconList = this.formData.iconList.map((item) => ({
                        name: item.fileName,
                        url: item.uri
                    }));
                }
                // 关联设备
                if (data.data && data.data.deviceId) {
                    data.data.deviceId = JSON.parse(data.data.deviceId);
                }
                // 显示设备
                if (data.data && data.data.displayDebiceId) {
                    data.data.displayDebiceId = JSON.parse(data.data.displayDebiceId);
                }
                // 处置预案
                if (data.data && data.data.planId) {
                    data.data.planId = JSON.parse(data.data.planId);
                }
                // 报警事件类型
                this.options.alarmEventsOptions.filter((item) => {
                    if (item.code === data.data.alarmEvents) {
                        this.options.alarmTypeOptions = item.alarmTypeList.map((item) => ({
                            // ...item,
                            label: item.name,
                            value: item.code
                        }));
                    }
                });
                const temp = JSON.parse(JSON.stringify(this.formData));
                this.formData.alarmType = temp.alarmEvents;
                this.formData.alarmEvents = temp.alarmType;
                this.alarmEventChange(this.formData.alarmEvents, temp.alarmEvents);
                this.formData.createTime = undefined;
                this.formLoading = false;
            });
        },
        // 保存
        submitForm() {
            // console.log('this.formData', this.formData);
            this.$refs.form.validate((valid) => {
                if (!valid) return false;
                let deviceId,
                    displayDebiceId = '';
                if (this.formData.deviceId) {
                    deviceId = JSON.stringify(this.formData.deviceId);
                }
                if (this.formData.displayDebiceId) {
                    displayDebiceId = JSON.stringify(this.formData.displayDebiceId);
                }
                // console.log('this.formData', this.formData)
                let fileList = [];
                if (this.formData.iconList) {
                    fileList = this.formData.iconList.map((item) => ({
                        fileName: item.name,
                        fileUrl: item.uri || item.url
                    }));
                }
                if (this.formData.id != null) {
                    api.update({
                        ...this.formData,
                        alarmEvents: this.formData.alarmType,
                        alarmEventsName: this.formData.alarmTypeName,
                        alarmType: this.formData.alarmEvents,
                        alarmTypeName: this.formData.alarmEventsName,
                        deviceId: deviceId,
                        displayDebiceId: displayDebiceId,
                        iconList: fileList
                    }).then((response) => {
                        console.log(response);
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.dialogVisible = false;
                        this.getList();
                    });
                } else {
                    api.add({
                        ...this.formData,
                        alarmEvents: this.formData.alarmType,
                        alarmEventsName: this.formData.alarmTypeName,
                        alarmType: this.formData.alarmEvents,
                        alarmTypeName: this.formData.alarmEventsName,
                        deviceId: deviceId,
                        displayDebiceId: displayDebiceId,
                        iconList: fileList
                    }).then((response) => {
                        console.log(response);
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.dialogVisible = false;
                        this.getList();
                    });
                }
            });
        },
        // 删除
        delRow(row) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.del(row.id).then((data) => {
                    console.log(data);
                    this.getList();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                });
            });
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val;
            this.getList();
        }
    }
};
</script>
<style lang="scss" scoped>
.con_tit {
    width: 88px;
    height: 32px;
    background: rgba(47, 225, 255, 0);
    border-radius: 4px;
    border: 1px solid var(--buttonDeep-color);
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: var(--buttonDeep-color);
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
    float: right;
    margin-right: 30px;
}
</style>
